<template>
  <div>
    <van-search value="" placeholder="请输入搜索关键词" v-model="value" @input="show"/>
    <div class="searchInfo" v-for="item of searchRes" :key="item.id" @click="handleClick(item)">{{item}} </div>
   <div v-show="searchRes">
      <h2>定位/最近访问</h2>
    <div class="pos">
      <button type="default">武汉</button>
      <button type="default" v-for="item of pos" :key="item.id" @click="handleClick(item)">{{item}}</button>
    </div>
    <h2>热门城市</h2>
    <div class="hot">
      <div>
        <button
          v-for="item of hot"
          :key="item.id"
          @click="handleClick(item.name)"
        >
          {{ item.name }}
        </button>
      </div>
    </div>
    <div class="cities">
      <van-index-bar>
        <div v-for="(item, index) of cities" :key="item.id">
          <van-index-anchor :index="index">{{ index }}</van-index-anchor>
          <p
            @click="handleClick(item.name)"
            v-for="item of item"
            :key="item.id"
            class="detail"
          >
            {{ item.name }}
          </p>
        </div>
      </van-index-bar>
    </div>
   </div>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";
Vue.use(IndexBar);
Vue.use(IndexAnchor);
import { Search } from "vant";
Vue.use(Search);
export default {
  data() {
    return {
      pos: [],
      hot: [],
      searchRes: [],
      cities: [],
      local:"",
      value:''
    };
  },
  mounted() {
    if(localStorage.getItem('history')){
      this.pos = localStorage.getItem('history').split(",");
      // console.log(this.pos);
    }
    this.$http("http://122.112.161.135:4000/api/city").then((res) => {
      console.log(res);
      this.hot = res.data.res[0].hotCities;
      this.cities = res.data.res[0].cities;
    });
  },
  methods: {
    // 跳转回首页 并传递城市名
    handleClick(val){
      this.$store.dispatch("changeCity",val)
      // localStorage.setItem('toCity',val)
      if(this.pos.includes(val)){
        let index = this.pos.indexOf(val)
        console.log(index);
        this.pos.splice(index,1)
        this.pos.unshift(val);
      }else{
        this.pos.unshift(val)
      }
      this.pos = this.pos.length>3?this.pos.slice(0,3):this.pos;
      localStorage.setItem('history',this.pos)
      this.$router.back();
    },
    show(){
      var keyword = this.value;
      this.$http('http://122.112.161.135:4000/api/city').then(res=>{
        console.log(res);
        var cities = res.data.data.cities;
        for(var k in cities){
          if(k==keyword){
            this.searchRes = cities[k]
            break
          }else{
            cities[k].forEach(item=>{
              if(item.spell.includes(keyword)||item.name.includes(keyword)){
               this.searchRes.push(item)
              }
            })
          }
        }
      })
      this.searchRes = Search
      console.log(this.Search);
    }
  },
  
};
</script>

<style scoped>
.van-search .van-cell {
  padding: 20px;
}
h2 {
  padding: 20px;
}
button {
  width: 150px;
  margin: 10px;
  height: 50px;
  font-weight: lighter;
  background: none;
  border:1px solid rgb(214, 214, 214);
}
.cities p{
  margin: 15px;
}
.cities >>> .van-index-bar__index{
  padding-top: 10px;
}
</style>